<template>
    <div class="album-tableitem">
        <div class="item-img" @mouseenter="isShowPlay = true" @mouseleave="isShowPlay = false" @click="showAlbumDetail">
            <!-- 图片上的播放图标 鼠标经过时显示 加了淡入淡出的动画 -->
            <transition name="el-fade-in-linear">
                <div class="album-playicon" v-show="isShowPlay">
                    <span class="iconfont icon-play1"></span>
                </div>
            </transition>
            <!-- 图片本身 使用懒加载 -->
            <div class="album-img">
                <img v-lazy="album.picUrl"/>
            </div>
        </div>
        <div class="item-text">
            <p>
                <span>{{album.name}}</span>
            </p>
            <p>
                <span>{{album.publishTime | showDate}}</span>
            </p>
        </div>
    </div>
</template>
<script>
import { formatDate } from "@/common/formatDate";
export default {
    name:'',
    props:{
        album:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data() {
        return {
            isShowPlay:false
        }
    },
    methods:{
       // 展示当前专辑的详情
       showAlbumDetail(){
        this.$router.push('/albumdetail/' + this.album.id)
       }
    },
    filters:{
         showDate(value){
            const date = new Date(value)
            return formatDate(date,'yyyy-MM-dd')
        }
    },
    created(){
        
    },
}
</script>
<style lang="less" scoped>
    .album-tableitem{
        width: 185px;
        height: 220px;
        margin: 5px 5px;
        .item-img{
            position: relative;
            .album-playicon {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 185px;
                height: 185px;
                background: rgba(100, 100, 100, 0.3);
                .iconfont {
                    font-size: 42px;
                    color: #fff;
                }
		}
        }
        .album-img{
           img{
                width: 185px;
                height: 185px;
           }
        }
        .item-text{
            p{
                margin-left: 2px;
            }
        }
    }

</style>